<template>
	<view class="activityDetails">
		<view class="pictureDetails" v-html="intro"></view>
		
		<view class="xl-box" @click="selClick()">
			<view :class="['sel-box', sel ? 'sel' : 'nosel']"> </view>
			<view class="xl-l"> 已阅读并同意该协议 </view>
		</view>
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
			<view v-if="isLogin" class="but" @click="apply()">申请</view>
            <view v-else>
                <button class="but" v-if="canIUseGetUserProfile && !hasUserInfo" @tap="getUserProfile"> 点击授权微信头像昵称 </button>
                <button class="but" v-if="!hasUserInfo" open-type="getUserInfo" @tap="getUserInfo"> 点击授权微信头像昵称 </button>
                <button class="but" v-if="hasUserInfo" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber"> 授权手机号申请 </button>
            </view>
		</view>
	</view>
</template>

<script>
	import {Base64} from '../static/base64.min.js';
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				sel: false,
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				intro: '',
                isLogin : false,
                canIUseGetUserProfile: false,
                hasUserInfo: false,
                wechatRegister:{
                	appkey: uni.getStorageSync('appkey'),
                	group: uni.getStorageSync('group'),
                    recomMobile: '',
                	nickName: '',
                	avatarUrl: '',
                    code: '',
                	encryptedData: '',
                	iv: '',
                },
			}
		},
		methods: {
			checkSpread() {
				var self = this;
				if(uni.getStorageSync('access-token') == '') {
					self.getIndex();
					return ;
				}
				serve.request({
					url: '/spread/index/check-spread',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					}
				}).then(res => {
					if(res.data.state) {
						uni.redirectTo({
							url: '/business/promote_store'
						});
						return ;
					}
					self.getIndex();
				});
			},
			getIndex() {
				var self = this;
				serve.request({
					url: '/site/agreement',
					data: {
						appkey: uni.getStorageSync('appkey'),
						type: 'markteing_explain'
					}
				}).then(res => {
					self.intro = Base64.decode(res.data.content).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');		
				});
			},
            // v2.10.4 版本以上 (包含v2.10.4) 获取用信息
            getUserProfile(e) {
            	var self = this;
				if(!self.sel){
					uni.showToast({
						title: "请先勾选协议",
						icon: 'none'
						
					});
					return ;
				}
                wx.getUserProfile({
            		desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            		success: (res) => {
                        console.info(res.userInfo);
            			self.wechatRegister.nickName = res.userInfo.nickName;
            			self.wechatRegister.avatarUrl = res.userInfo.avatarUrl;
            			self.hasUserInfo = true;
                        uni.showToast({
                        	title: '请点击授权手机号申请',
                        	icon: 'none'
                        });
            		},fail:function(e){
            			uni.showToast({
            				title: '当前微信版本不支持，请升级',
            				icon: 'none'
            			});
            		}
                })
            },
            // v2.10.4 版本已下获取用信息
            getUserInfo(e) {
                // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
            	var self = this;
				if(!self.sel){
					uni.showToast({
						title: "请先勾选协议",
						icon: 'none'
						
					});
					return ;
				}
                wx.getUserInfo({
                	success:function(res){
                		self.wechatRegister.nickName = res.userInfo.nickName;
                		self.wechatRegister.avatarUrl = res.userInfo.avatarUrl;
                		self.hasUserInfo = true;
                        uni.showToast({
                        	title: '请点击授权手机号申请',
                        	icon: 'none'
                        });
                	},
                	fail:function(e){
                		uni.showToast({
                			title: '当前微信版本不支持，请升级',
                			icon: 'none'
                		});
                	}
                });
                return ;
            },
			selClick(){
				if(this.sel){
					this.sel = false;
				}else{
					this.sel = true;
				}
			},
			apply(){
				if(!this.sel){
					uni.showToast({
						title: "请先勾选协议",
						icon: 'none'
						
					});
					return ;
				}
				uni.redirectTo({
				    url: '/business/promote_apply'
				});
			},
            getPhoneNumber(e){
            	if(e.detail.iv){
            		this.wechatRegister.iv = encodeURIComponent(e.detail.iv);
            		this.wechatRegister.encryptedData = encodeURIComponent(e.detail.encryptedData);
            		this.wechatRegisterFun();
            	}else{
            		uni.showToast({
            			title: '您点击了不允许按钮',
            			icon: 'none'
            		});
            	}
            },
            async wechatLogin() {
            	var self = this;
            	return new Promise((resolve, reject) => {
            		uni.login({
            			success: function (res) {
            				self.wechatRegister.code = res.code;
            				resolve(true);
            			},
            			fail:function(){
            				resolve(false);
            			}
            		});
            	});
            },
            async wechatRegisterFun(){
            	var self = this;
                if(!self.sel){
                	uni.showToast({
                		title: "请先勾选协议",
                		icon: 'none'
                		
                	});
                	return ;
                }
                uni.showLoading({
                	title: '验证中···',
                	mask: true
                });
            	let checkLogin = await self.wechatLogin();
            	if(checkLogin) {
            		serve.request({
            			url: '/site/wechat-register',
            			data: self.wechatRegister
            		}).then(res => {
            			uni.hideLoading();
            			if (res.code == 200) {
            				uni.setStorageSync('access-token', res.data.access_token);
            				uni.redirectTo({
            				    url: '/business/promote_apply'
            				});
            				return ;
            			}
            			uni.showToast({
            				title: res.message,
            				icon: 'none'
            			});
            		});
            	} else {
            		uni.showToast({
            			title: '当前微信版本不支持，请升级',
            			icon: 'none'
            		});
            	}
            },	
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		async onLoad(options) {
            await this.$defaultLogin();
            // uni.setStorageSync('access-token', '');
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 178;
			}
            if(uni.getStorageSync('access-token') != '') {
                this.isLogin = true;
            }
            let recomMobile = options.recommend_mobile || '';
            if(recomMobile != '') {
                uni.setStorageSync('recommend_mobile', recomMobile);
                this.wechatRegister.recomMobile = recomMobile;
            }
            if (wx.getUserProfile) {
            	this.canIUseGetUserProfile = true;
            }
			this.checkSpread();
		},
		onPullDownRefresh() {
			this.getIndex();
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding-bottom: 200rpx;
		color: #1e2022;
	}
	.pictureDetails{
		padding: 10rpx 20rpx;
		/* width: 100%; */
		font-size: 32rpx;
	}
	
	
	.xl-box{
		width: 100vw;
		padding: 36rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.sel-box{
		margin-right: 24rpx;
	}
	.xl-l{
		font-size: 32rpx;
		color: #333333;
	}
	
	
	
	
	.sel {
		background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
		background-repeat: no-repeat;
		width: 40rpx;
		height: 40rpx;
		background-size: 100%;
	}
					
	.nosel {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}
	
	.but-box{
		position: fixed;
		bottom: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		    background: #FFBC00;
		    color: #fff;
		    border-radius: 0;
		    width: 100vw;
		    height: 88rpx;
			text-align: center;
			line-height: 88rpx;
		    font-size: 36rpx;
	}
	
</style>
